<template>
  <el-drawer v-model="dialogFormVisible" :title="dialogTitle" size="1000" @close="handleClose">
    <el-form
      :model="info"
      ref="formRef"
      :rules="rules"
      label-position="right"
      label-width="120px"
      size="default"
      :scroll-to-error="true"
      :show-message="false"
    >
      <el-form-item label="信息类型" prop="module_type_key" required>
        <el-select v-model="info.module_type_key" placeholder="请选择类型" style="width: 200px">
          <el-option
            :label="v.type_name"
            :value="v.type_key"
            v-for="v in types"
            :key="v.type_id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title" required>
        <el-input v-model="info.title" placeholder="请输入标题" />
      </el-form-item>
      <el-form-item label="内容" prop="content" required>
        <Uediter v-model="info.content" @change="contentChangeFunc"></Uediter>
      </el-form-item>
      <el-form-item label="排序" prop="display_order">
        <el-input-number v-model="info.display_order" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="配图" prop="image_url">
        <el-row>
          <el-button type="primary" @click="openUpload">选择图片</el-button>
          <div v-if="info.image_url != ''" class="img">
            <img :src="info.image_url" width="100" height="100" />
          </div>
        </el-row>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClose">关闭</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading">确定</el-button>
      </div>
    </template>
    <Upload v-if="isupload" :isupload="isupload" :type="upload_type" @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, defineExpose, defineEmits, onMounted, inject } from "vue";
import { ElMessage } from "element-plus";
import Uediter from "@/components/UE.vue";
import { addModuleApi, editModuleApi } from "@/api/carfilm/companymodule";
const dialogFormVisible = ref(false);
const formRef = ref<any>(null);
const dialogTitle = ref("");
const types = inject("types") as any[];
const ue = ref<any>(null);
const loading = ref(false);
const isupload = ref(false);
const upload_type = ref("");
/*富文本框配置*/
const ueditor = ref({
  text: "",
  config: {
    initialFrameWidth: 800,
    initialFrameHeight: 400,
  },
});
defineProps({
  department: {
    type: Array,
    default: [] as any[],
  },
  classList: {
    type: Array,
    default: [] as any[],
  },
});
const info = ref({
  module_id: 0,
  module_type_key: "",
  display_order: 0,
  title: "",
  content: "",
  image_url: "",
});

const rules = reactive({
  title: [
    {
      required: true,
      message: "请输入标题",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入内容",
    },
  ],
});

const emits = defineEmits(["doneSave"]);
const contentChangeFunc = (e: any) => {
  info.value.content = e;
};
const open_type = ref("");
const open = (type: string, row?: any) => {
  open_type.value = type;
  console.log(row);
  if (type == "edit") {
    dialogTitle.value = "编辑信息";
    info.value = {
      module_id: row.module_id,
      module_type_key: row.module_type_key,
      display_order: row.display_order,
      title: row.title,
      content: row.content,
      image_url: row.image_url,
    };
  } else if (type == "add") {
    dialogTitle.value = "添加信息";
    info.value = {
      module_id: 0,
      module_type_key: "",
      display_order: 0,
      title: "",
      content: "",
      image_url: "",
    };
  }
  dialogFormVisible.value = true;
};
const onSubmit = () => {
  formRef.value.validate((valid: any) => {
    if (valid) {
      loading.value = true;
      if (open_type.value == "add") {
        addModuleApi(info.value)
          .then((data: any) => {
            ElMessage({
              message: "添加成功",
              type: "success",
            });
            dialogClose();
            emits("doneSave");
          })
          .catch((error) => {
            loading.value = false;
          });
      } else if (open_type.value == "edit") {
        editModuleApi(info.value)
          .then((data: any) => {
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            loading.value = false;
            dialogClose();
            emits("doneSave");
          })
          .catch((error) => {
            loading.value = false;
          });
      }
    }
  });
};

const dialogClose = () => {
  dialogFormVisible.value = false;
};

const handleClose = () => {
  loading.value = false;
  formRef.value.resetFields();
  dialogFormVisible.value = false;
};
/*上传*/
const openUpload = (e: any) => {
  upload_type.value = e;
  isupload.value = true;
};
/*获取图片*/
const returnImgsFunc = (e: any) => {
  if (e != null && e.length > 0) {
    info.value.image_url = e[0].file_path;
  }
  isupload.value = false;
};
defineExpose({
  open,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
</style>

<style lang="scss" scoped></style>
